<template>
  <view style="display: flex;flex-direction: row;height: 27px;">
    <view class="food-control">
      <view class="cont" style="margin-top: 2px;" @click="decreaseCart(food)" v-show="food.count>0">
        <u-icon name="minus-circle" color="#2979ff" size="45"></u-icon>
      </view>
      <!-- <text style="padding: 0 4px;" v-show="food.count>0">{{food.count}}</text> -->
      <input type="number" maxlength="3"
        style="margin: 0 2px;width: 36px;padding: 0 0px;border-radius: 3px; text-align:center; margin:0 5px;"
        v-show="food.count > 0" v-model="food.count" @blur="inputCart(food)" :disabled="true"/>
    </view>
    <view style="flex: 1;margin-top: 2px; " class="cont" @click="addCart(food)">
      <u-icon name="plus-circle" color="#2979ff" size="45"></u-icon>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
// import Vue from 'vue'
export default {
  props: {
    food: {
      type: Object,
    }
  },
  data () {
    return {};
  },
  methods: {
    addCart: function (item) {
      console.log(item)
      if (item.count >= item.Quantity) {
        this.$refs.uToast.show({
          title: '所选数量超出库存数!',
          type: 'error',
          icon:false
        })
        return false
      }else{
        this.$emit('add', item)
      }
    },
    decreaseCart (item) {
      this.$emit('dec', item)
    },
    inputCart (item) {
      this.fcount = item.count
      if (item.count >= 999 || item.count >= item.Quantity) {
        this.$refs.uToast.show({
          title: '所选数量超出库存数!',
          type: 'error',
          icon:false
        })
        item.count = item.Quantity
        return false;
      } else {
        this.$emit('input', item)
      }

    }
  }
}
</script>

<style scoped>
.food-control {
  display: flex;
  flex: 1;
  justify-content: space-around;
}

.cont {
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  border-radius: 50%;
  text-align: center;
}
</style>